<template>

  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="编号" prop="id" />
    <el-table-column label="姓名" prop="name" />
    <el-table-column label="账号" prop="username" />
    <el-table-column label="性别" prop="sex">
       <template #default="scope">
         <el-text readonly>{{scope.row.sex === 0 ? '男' : '女'}}</el-text>
       </template>
    </el-table-column>


    <el-table-column label="头像" prop="avter">
      <template #default="scope">
      <el-image :src="scope.row.avter" alt="" style="width: 50px;height: 50px"></el-image>
      </template>
    </el-table-column>

    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search" />
      </template>
      <template #default="scope">
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >
          Delete
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination small layout="prev, pager, next" :total="tableData.pages" />
<!--  <el-pagination-->
<!--      small-->
<!--      background-->
<!--      layout="prev, pager, next"-->
<!--      :total="50"-->
<!--      class="mt-4"-->
<!--  />-->
</template>

<script setup lang="js">
  import {ref} from "vue";
  import {list} from "@/api/user.js";


  const search = ref('')
  const tableData = ref([

      ]);

  function getData() {
       list().then(res => {
         console.log(res.data.data);
          tableData.value = res.data.data.records;
      })
  }

  const handleDelete = (index, row) => {
    tableData.value.splice(index, 1)
  }

  getData()
</script>

<style scoped>

</style>